<template>
    <div class="agent-detail">
        <el-dialog
            :visible.sync="is_show"
            title="代理人详情"
            @closed="closed"
            width="700px"
            center
        >
            <div>
                <div class="row-item">
                    <div class="item">
                        <div class="title">姓名</div>：
                        <div class="value">{{agent_data.name || '无'}}</div>
                    </div>
                    <div class="item">
                        <div class="title">手机号</div>：
                        <div class="value">{{agent_data.phone || '无'}}</div>
                    </div>
                </div>
                <div class="row-item">
                    <div class="item">
                        <div class="title">擅长领域</div>：
                        <div class="value">{{agent_data.territory || '无'}}</div>
                    </div>
                    <div class="item">
                        <div class="title">现从业机构</div>：
                        <div class="value">{{agent_data.current_unit || '无'}}</div>
                    </div>
                </div>
                <div class="row-item">
                    <div class="item">
                        <div class="title">身份证正面照片</div>：
                        <div class="value">
                            <el-image
                                v-if="agent_data.id_card_pro_pic"
                                :src="agent_data.id_card_pro_pic"
                                :preview-src-list="[agent_data.id_card_pro_pic]"
                            ></el-image>
                            <span v-else>无</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">身份证反面照片</div>：
                        <div class="value">
                            <el-image
                                v-if="agent_data.id_card_con_pic"
                                :src="agent_data.id_card_con_pic"
                                :preview-src-list="[agent_data.id_card_con_pic]"
                            ></el-image>
                            <span v-else>无</span>
                        </div>
                    </div>
                </div>
                <div class="row-item">
                    <div class="item">
                        <div class="title">代理师资格证</div>：
                        <div class="value">
                            {{agent_data.certificate}}
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">代理师资格证照片</div>：
                        <div class="value">
                            <el-image
                                v-if="agent_data.certificate_pic"
                                :src="agent_data.certificate_pic"
                                :preview-src-list="[agent_data.certificate_pic]"
                            ></el-image>
                            <span v-else>暂无</span>
                        </div>
                    </div>
                </div>
                <div class="row-item">
                    <div class="item no-border">
                        <div class="title">{{is_teacher == 1 ? '徒弟' : '导师'}}</div>：
                        <div class="value" v-if="is_teacher == 1">
                            <div class="clip">
                                {{students.length == 0 ? '暂无徒弟' : studentsString(students)}}
                            </div>
                        </div>
                        <div class="value clip" v-if="is_teacher != 1">
                            {{teacher ? teacher.name : '暂无导师'}}
                        </div>
                    </div>
                </div>
            </div>
            <template slot="footer">
                <div class="tc">
                    <el-button v-no-more-click:3000 @click="is_show = false">关闭</el-button>
                    <el-button v-no-more-click:3000 type="success" @click="appointTeacher" v-if="is_teacher == 2 && !parent_id">
                        指派导师
                    </el-button>
                    <el-button v-no-more-click:3000 type="success" @click="agentOperate('become_student')" v-if="is_teacher == 3">
                        成为徒弟
                    </el-button>
                    <el-button v-no-more-click:3000 type="danger" @click="agentOperate('cancel_teacher')" v-if="is_teacher == 1 && students.length == 0">
                        取消导师资格
                    </el-button>
                    <el-button v-no-more-click:3000 type="success" @click="agentOperate('become_teacher')" v-if="is_teacher != 1 && teacher == null">
                        成为导师
                    </el-button>
                    <el-button v-no-more-click:3000 type="danger" @click="agentOperate('cancel_exist_teacher')" v-if="is_teacher == 2 && teacher != null">
                        解除师徒关系
                    </el-button>
                    <el-button v-no-more-click:3000 type="primary" @click="editAgent">编辑</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 修改 -->
		<edit-agent ref="edit-agent" @refresh="refresh"></edit-agent>

        <!-- 指派 -->
		<appoint-person ref="appoint-person" @refresh="refresh"></appoint-person>
    </div>
</template>

<script>
import editAgent from "./edit-agent"
import appointPerson from "./appoint-person"
export default {
    components: {
        editAgent,
        appointPerson
    },
    data() {
        return {
            baseUrl: global.baseurl,
            is_show: false,
            agent_id: 0,
            is_teacher: 1,
            trial_free: 2,
            parent_id: null,
            teacher: null,
            students: [],
            agent_data: {
                name: '',
                phone: '',
                territory: '',
                current_unit: '',
                certificate: 1,
                certificate_pic: '',
                id_card_pro_pic: '',
                id_card_con_pic: '',
                email_work: '',
                type: '',
                alipay_num: '',
                bank_card: '',
                register_bank: '',
                is_take: '',
            }
        }
    },
    methods: {
        studentsString(arr) {
            let str = ''
            arr.forEach((v, index) => {
               str += v.name
               if (index + 1 < arr.length) {
                   str += '，'
               }
            })
            return str
        },
        closed() {
            Object.assign(this.$data, this.$options.data())
        },
        agentOperate(type) {
            let msg = ''
            if(type == 'cancel_teacher') {
                msg = `确认取消<span class="finish">${this.agent_data.name}</span>的导师资格吗？`
            } else if (type == 'become_teacher') {
                msg = `确认开通<span class="finish">${this.agent_data.name}</span>的导师资格吗？`
            } else if (type == 'cancel_exist_teacher') {
                msg = `确认解除<span class="finish">${this.agent_data.name}</span>与<span class="finish">${this.teacher.name}</span>的师徒关系吗？`
            } else if (type == 'become_student') {
                msg = `确认让<span class="finish">${this.agent_data.name}</span>成为徒弟吗？`
            }
            this.$confirm(msg, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                center: true,
                dangerouslyUseHTMLString: true,
                type: 'warning'
            }).then(() => {
                let params = {}
                if (type == 'trial_free') {
                    params.trial_free = this.trial_free == 1 ? 2 : 1
                }
                this.$axios.put(`/api/agent/${this.agent_id}/${type}`, params).then(res => {
                    if (res.data.code == 200) {
                        this.$emit('refresh')
                        this.is_show = false
                        let msg = '成为导师成功'
                        if (type == 'cancel_teacher') {
                            msg = '取消导师资格成功'
                        } else if (type == 'cancel_exist_teacher') {
                            msg = '解除师徒关系成功'
                        } else if (type == 'become_student') {
                            msg = '成为徒弟成功，请指派导师'
                        }
                        this.$message({
                            type: 'success',
                            message: msg
                        })
                        if (type == 'become_student') {
                            this.appointTeacher()
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.message
                        })
                    }
                }).catch(e => {})
            }).catch(e => {})
        },
        showOn(data) {
            this.agent_id = data.id
            this.getAgent()
        },
        refresh() {
            this.$emit('refresh')
            this.is_show = false
        },
        appointTeacher() {
            this.$refs['appoint-person'].showOn(this.agent_data)
        },
        getAgent() {
            this.$axios.get(`/api/agent/${this.agent_id}`).then(res => {
                if (res.data.code == 200) {
                    let data = res.data.data
                    data.id_card_pro_pic = ''
                    data.id_card_con_pic = ''
                    data.current_unit = ''
                    data.certificate_pic = ''
                    if (data.id_card) {
                        data.id_card_pro_pic = this.baseUrl + '/storage/upload/' + JSON.parse(data.id_card).pro
                        data.id_card_con_pic = this.baseUrl + '/storage/upload/' + JSON.parse(data.id_card).con
                    }
                    if (data.certificate && data.certificate.indexOf('means') > -1) {
                        data.certificate_pic = this.baseUrl + '/storage/upload/' + data.certificate
                        data.certificate = '有'
                    } else {
                        data.certificate = data.certificate == '是' ? '有' : (data.certificate == '有' ? '有' : '无')
                    }
                    for (let i in this.agent_data) {
                        this.agent_data[i] = data[i]
                    }
                    this.is_teacher = data.is_teacher
                    this.parent_id = data.parent_id
                    this.students = data.student
                    this.teacher = data.teacher
                    this.trial_free = data.trial_free
                    this.is_show = true
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            }).catch(e => {
                console.log(e)
            })
        },
        editAgent() {
            this.agent_data.id = this.agent_id
            this.$refs['edit-agent'].showOn(this.agent_data)
        },
    }
}
</script>

<style lang="less" scoped>
.agent-detail {
    /deep/.el-dialog {
        width: 70%;
        min-width: 800px;
        max-width: 800px;
        .el-dialog__body {
            padding-top: 10px;
            padding-bottom: 10px;
            .row-item {
                display: flex;
                display: -webkit-flex;
                border: 1px solid #ccc;
                border-bottom: none;
                max-width: 100%;
                &:nth-last-child(1) {
                    border-bottom: 1px solid #ccc;
                }
                .item {
                    max-width: 100%;
                    height: 40px;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    padding-left: 5px;
                    &:first-child {
                        border-right: 1px solid #ccc;
                    }
                    .title {
                        flex: 0 0 130px;
                        text-align: justify;
                        text-align-last: justify;
                    }
                    .value {
                        max-width: calc(100% - 150px);
                        flex: 1;
                        display: flex;
                        display: -webkit-flex;
                        .el-image {
                            width: 36px;
                            height: 36px;
                        }
                        &.clip {
                            max-width: 760px;
                        }
                    }
                    &.no-border {
                        border-right: none;
                    }
                }
            }
        }
    }
}
</style>
